<template>
	<view class="sxran-im-group-users-page">

		<view class="sxran-im-group-users-body">
			<uni-nav-bar :border='false' @clickLeft='back()' @clickRight='controlChange' color="var(--uni-text-color)"
				backgroundColor="transparent" :left-icon="isMobile && 'left' || ''" :leftText="isMobile && '返回' || ''"
				:rightText="groupInfos.isAdmin ? !control ? '管理' : '取消管理' : ''"
				:title="'群信息'+ '('+ groupInfos?.memberList?.length + ')'" />
			<view class="group-users-grid">
				<scroll-view :show-scrollbar='false' style="max-height: 300px;" scroll-y :scrollWithAnimation='true'>
					<view class="group-users-grid-body">
						<view class="user-item">
							<view class="_plusempty" @click="inviteUser">
								<uni-icons type='plusempty' color="var(--uni-color-content)" size="30"></uni-icons>
							</view>
						</view>
						<view class="user-item" v-for="(item,index) in groupInfos.memberList" :key='index'>
							<sxran-im-avatar :src='item.avatar'></sxran-im-avatar>
							<sxran-im-text class="nick-name" :text='item.nick' align="center" type='content'
								:lines="1"></sxran-im-text>
							<uni-icons v-show='control' class='minus-filled'
								@click='dialogToggle({data:item,type: EXPORT})' type='minus-filled' color="red"
								size="14"></uni-icons>
						</view>

					</view>

				</scroll-view>
			</view>
			<uni-section class="border-bottom" title="群聊名称">
				<template v-slot:right>
					{{groupInfos.name}}
				</template>
			</uni-section>
			<uni-section class="border-bottom" title="简介">
				<template v-slot:right>
					{{groupInfos.introduction}}
				</template>
			</uni-section>
			<uni-section class="border-bottom" title="群头像">
				<template v-slot:right>
					<sxran-im-avatar :src="groupInfos.avatar"></sxran-im-avatar>
				</template>
			</uni-section>
			<view class="out-group">
				<uni-button type="warn"
					@click="dialogToggle({type:groupInfos.isAdmin ? DISBAND : EXIT})">{{groupInfos.isAdmin ? '解散群聊':'退出群聊'}}</uni-button>
			</view>
		</view>

	</view>

	<uni-popup ref="alertDialog" type="dialog">
		<uni-popup-dialog :type="msgType" cancelText="关闭" confirmText="确定" :title="dialogTitle" content="不能撤销请谨慎操作"
			@confirm="dialogConfirm"></uni-popup-dialog>
	</uni-popup>
	
	
	<view class="model-body" v-if="isModel">
		<view class="model-content">
			<uni-icons @click="isModel = false" class="close" type='close' color="var(--uni-color-text)" size="30"></uni-icons>
			<view class="model-content-body">
				<friend-group :model='true' :id='groupInfos.groupId' @close='isModel = false'></friend-group>
			</view>
		</view>
	</view>
</template>

<script>
	// const EXIT = 0,
	// 	EXPORT = 1,
	// 	DISBAND = 2;
	import friendGroup from '@/uni_modules/sxran-im-modules/pages/friend-group/friend-group.vue'
	export default {
		components:{
			friendGroup
		},
		data() {
			return {
				msgType: 'warn',
				control: false,
				dialogTitle: '',
				delType: '',
				delUserData: null,
				EXIT: 0,
				EXPORT: 1,
				DISBAND: 2,
				isModel:false
			}
		},
		computed: {
			groupInfos() {
				return uni.$Im.getGroupInfos() || {};
			},
			conversation() {
				return uni.$Im.getConversationById(uni.$Im.getCurrentConversationId());
			},
			isMobile() {
				return uni.$u.isMobile()
			},
		},
		mounted() {

		},
		methods: {
			back() {
				uni.navigateBack()
			},
			controlChange() {
				this.control = !this.control
			},
			setDialogTitle() {
				if (this.delType == this.DISBAND) {
					this.dialogTitle = '确定解散群聊？'
				} else if (this.delType == this.EXIT) {
					this.dialogTitle = '确定退出群聊？'
				} else {
					this.dialogTitle = '确定移出群聊？'
				}
			},
			dialogToggle({
				data,
				type
			}) {
				if (data) {
					this.delUserData = data;
				}
				this.delType = type;
				console.log(type)
				this.setDialogTitle();
				this.$refs.alertDialog.open()
			},
			dialogConfirm() {
				const fn = {
					[this.DISBAND]: this.disBandGroup,
					[this.EXIT]: this.exitGroup,
					[this.EXPORT]: this.exportGroup
				}
				if (this.delType == this.EXPORT) {
					fn[this.delType](this.delUserData);
					return;
				}
				fn[this.delType]();
			},
			disBandGroup() {
				uni.$Im.disBandGroupCmdMethods({
					groupId: this.conversation.groupId
				}, (body) => {
					//需移除当前会话，群信息，群聊列表数据,
					if (body.msg) {
						uni.showToast({
							title: body.msg,
							icon: 'none',
						})
						return;
					}
					//返回我的群聊
					if(this.isMobile){
						uni.redirectTo({
							url: `/uni_modules/sxran-im-modules/pages/group-chat/group-chat`
						})
					}else{
						const event = new CustomEvent('redirectTo',{
							message:''
						});
						dispatchEvent(event);
					}
				})
			},
			//退出群聊
			exitGroup() {
				uni.$Im.exitGroupCmdMethods({
					groupId: this.conversation.groupId
				}, (body) => {
					//需移除当前会话，群信息，群聊列表数据,
					if (body.msg) {
						uni.showToast({
							title: body.msg,
							icon: 'none',
						})
						return;
					}
					//返回我的群聊
					if(this.isMobile){
						uni.redirectTo({
							url: `/uni_modules/sxran-im-modules/pages/group-chat/group-chat`
						})
					}else{
						const event = new CustomEvent('redirectTo',{
							message:''
						});
						dispatchEvent(event);
					}
					
				})
			},
			//移除群聊
			exportGroup(data) {
				uni.$Im.exportGroupCmdMethods({
					users: [data.userId],
					groupId: this.conversation.groupId
				});
				this.delUserData = null;
			},
			inviteUser() {
				//#ifdef H5
				if (this.isMobile) {
					uni.navigateTo({
						url: `/uni_modules/sxran-im-modules/pages/friend-group/friend-group?groupId=${this.conversation.groupId}`
					})
				} else {
					this.isModel = true;
				}

				// #endif

				// #ifndef H5
				uni.navigateTo({
					url: `/uni_modules/sxran-im-modules/pages/friend-group/friend-group?groupId=${this.conversation.groupId}`
				})
				// #endif

			}
		}
	}
</script>

<style lang="scss">
	.sxran-im-group-users-page {
		width: 100%;
		height: 100%;

		.sxran-im-group-users-body {
			width: 100%;
			height: 100%;
			overflow: hidden;

			.out-group {
				margin: 15px 10px;
			}

			.border-bottom {
				// border-bottom: 1px solid var(--uni-border-color);
				background-color: transparent !important;

				:nth-last-of-type() {
					border: none;
				}
			}

			.group-users-grid {
				margin: 15px 10px;
				min-height: 0;
				max-height: 300px;
				overflow: hidden;

				.group-users-grid-body {
					display: flex;
					flex-wrap: wrap;
					justify-content: flex-start;
				}

				._plusempty {
					background-color: var(--uni-bg-color-grey);
					padding: 15px;
					border-radius: 4px;
				}

				.user-item {
					position: relative;
					display: flex;
					justify-content: center;
					align-items: center;
					flex-direction: column;
					margin: 0 5px 15px 0;
					width: calc((100% - 15px) / 4);
					min-width: calc((100% - 15px) / 4);
					max-width: calc((100% - 15px) / 4);

					&:nth-child(4n) {
						margin-right: 0;
					}

					.nick-name {
						// overflow: hidden;
						// white-space: normal;
						// text-overflow: ellipsis;
					}

					.minus-filled {
						position: absolute;
						right: 0;
						top: 0;
					}
				}

			}
		}
		
	}
	.model-body{
		position: fixed;
		inset: 0;
		
		background-color: rgba(0,0,0,0.3);
		.model-content{
			height: 100vh;
			width: 100vw;
			display: flex;
			justify-content: center;
			align-items: center;
			position: relative;
			.close{
				position: absolute;
				right: 10px;
				top: 10px;
			}
			.model-content-body{
				border-radius: 8px;
				width: 30vw;
				height: 80vh;
				overflow: hidden;
			}
		}
		
	}
</style>